<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <title>Document</title>
    <link rel="stylesheet" href="./static/element-plus/index.css"/>
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
</head>
<body>
    <div id="app">
        <h2>注册</h2>
        <el-row>
            <el-col :md="24" :lg="8"></el-col>
            <el-col :md="24" :lg="8">
                <el-form label-width="auto" style="max-width: 600px">
                    <el-form-item label="用户名">
                        <el-input v-model="username" @blur="validateUsername" placeholder="请输入至少4个字符的用户名" />
                        <div v-if="usernameError" style="color: red; font-size: 12px;">
                            {{ usernameError }}
                        </div>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="password" @blur="validatePassword" type="password" placeholder="请输入至少6个字符的密码" />
                        <div v-if="passwordError" style="color: red; font-size: 12px;">
                            {{ passwordError }}
                        </div>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="confirmPassword" @blur="validateConfirmPassword" type="password" placeholder="请再次输入密码" />
                        <div v-if="confirmPasswordError" style="color: red; font-size: 12px;">
                            {{ confirmPasswordError }}
                        </div>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="age" @blur="validateAge" type="number" />
                        <div v-if="ageError" style="color: red; font-size: 12px;">
                            {{ ageError }}
                        </div>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="gender">
                            <el-radio value="male">男</el-radio>
                            <el-radio value="female">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="兴趣爱好">
                        <el-checkbox-group v-model="hobby">
                            <el-checkbox value="soccer">足球</el-checkbox>
                            <el-checkbox value="photography">摄影</el-checkbox>
                            <el-checkbox value="travel">旅行</el-checkbox>
                            <el-checkbox value="climbing">攀爬</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="职业">
                        <el-select v-model="job" placeholder="选择你的职业">
                            <el-option value="大数据工程师">大数据工程师</el-option>
                            <el-option value="前端工程师">前端工程师</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">Create</el-button>
                        <el-button>Cancel</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :md="24" :lg="8"></el-col>
        </el-row>
        <el-dialog v-model="dialogVisible" title="请确认注册信息" width="500">
            <p>{{username}}</p>
            <p>{{age}}</p>
            <p>{{gender}}</p>
            <p>{{hobby}}</p>
            <p>{{job}}</p>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">提交</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</body>
<script>
    const App = {
    data() {
        return {
            username: "",
            password: "",
            confirmPassword: "",
            age: 0,
            gender: "",
            hobby: [],
            job: "",
            dialogVisible: false,
            usernameError: "",
            passwordError: "",
            confirmPasswordError: "",
        };
    },
    methods: {
        validateUsername() {
            if (this.username.length < 4) {
                this.usernameError = "用户名至少需要4个字符";
            } else {
                this.usernameError = "";
            }
        },
        validatePassword() {
            if (this.password.length < 6) {
                this.passwordError = "密码至少需要6个字符";
            } else {
                this.passwordError = "";
            }
        },
        validateConfirmPassword() {
            if (this.password !== this.confirmPassword) {
                this.confirmPasswordError = "两次输入的密码不一致";
            } else {
                this.confirmPasswordError = "";
            }
        },
        validateAge(){
            if(this.age <= 0 || this.age > 100){
                this.ageError = "年龄错误"
            }else{
                this.ageError = "";
            }
        },
        onSubmit() {
            this.validateUsername();
            this.validatePassword();
            this.validateConfirmPassword();
            this.validateAge();
            if (this.usernameError) {
                alert("用户名至少需要4个字符");
                return;
            }if(this.passwordError){
                alert("密码至少需要6个字符");
                return;
            }if(this.confirmPasswordError){
                alert("两次输入的密码不一致");
                return;
            }if(this.ageError){
                alert("年龄错误");
                return;
            }
            this.dialogVisible = true;
        }
    }
};

Vue.createApp(App).use(ElementPlus).mount("#app");
</script>
</html>